<template>
	<view class="container">
		<u-sticky>
			<view class="headerContainer">
				<view class="searchItem">
					<u-search shape="round" :height="searchObj.height" :input-align="searchObj.inputAlign"
						:show-action="searchObj.showAction" placeholder="请输入姓名或手机号" @search="onSearch"
						v-model="searchObj.value"></u-search>
				</view>
			</view>
		</u-sticky>	

<!-- 		<view class="headerNone">
			
		</view> -->
		<!-- 渠道用户列表-->
		<template v-if="isChannel" >
			<template v-for="(card, cardIndex) in cardObj.list">
				<view class="namecardContainer" :key="card.id" @click="gotoChannelCustomerDetail(card)">
					<!-- 渠道才会显示用户报备过期或者无效 -->
					<view v-if="card.status==1||card.status==2" class="tagWrapper">
						{{card.status==1?"无效":"过期"}}
					</view>
					<!-- 渠道才会显示用户报备无效,不显示 -->
					<view v-if="card.status!=1" class="stepContainer">
						<view class="stepWrapper">
							<template v-for="(item, index) in visitorStatusList">
								<view :key="index" class="dropWrapper"
									:class="index<=card.visitorStatusId?'dropWrapperEn':'dropWrapperDis'">
									<view class="text" :class="index<=card.visitorStatusId?'textEn':'textDis'">
										{{item.name}}
									</view>
								</view>

								<view v-if="!item.end"
									:class="index<card.visitorStatusId?'lineWrapperEn':'lineWrapperDis'">
								</view>
							</template>
						</view>
					</view>
					<view class="updateAllPhone">
						<view class="left">
						</view>
						<view class="right" style="height: 50rpx;margin-top: 10rpx;">
							<view class="phoneContainer">
								{{card.phone}}
							</view>
							<view v-if="card.status==2" class="updatePhoneBtnWrapper"
								@click.stop="updateChannelReportTime(card)">
								报备
							</view>
							<view v-else-if="!card.hasAllPhoneNumber" class="updatePhoneBtnWrapper"
								@click.stop="onShowUpdateAllPhoneNum(card)">
								补全
							</view>
						</view>
					</view>


					<view class="top" style="margin-top: 10rpx;">
						<view class="left">
							<image class="avatar" :src="card.avatar||'/static/img/user_img_ntx.png'" mode=""></image>
							<view class="wrapper">
								<view class="name">
									{{card.name||''}}
									<template v-if="card.sex<2">
										<span style="margin-left: 10rpx"></span>
										{{sexList[card.sex]}}
									</template>
								</view>
								<view v-if="card.salesmanName&&card.salesmanName.length>0" class="name">
									置业顾问：
									<text class="myText">
										{{card.salesmanName}}
									</text>
									<view v-if="card.allocateSource!=null&&'sys_allocate'==card.allocateSource"
										class="name">
										旧顾问：
										<text class="myText">
											{{card.lastSalesmanName||''}}
										</text>
									</view>
								</view>
								<template v-if="card.customerStatusLogs.length>0">
									<view class="firstWrapper text-2line-ellipsis">
										最新动态：{{card.customerStatusLogs[0].createTime}}
									</view>
									<view class="firstWrapper">
										【{{card.customerStatusLogs[0].statusTitle}}】
									</view>
								</template>
							</view>
						</view>
					</view>

					<view class="bntWrapper">
						<view v-if="card.phone&&card.phone.length>0" class="leftBtn"
							@click.stop="gotoPhone(card.phone)">
							<image class="icon" src="/pages/shop/static/image/icon_visitor_tel.png" mode=""></image>
							客户
						</view>
					</view>

				</view>
			</template>
		</template>
		<!-- 置业顾问用户列表-->
		<template v-else>
			<template v-for="(card, cardIndex) in cardObj.list">
				<view class="namecardContainer" :key="card.id" @click="gotoCustomerDetail(card)">
					<view v-if="card.status==1" class="tagWrapper">
						无效
					</view>
					<view class="stepContainer">
						<view class="stepWrapper">
							<template v-for="(item, index) in visitorStatusList">
								<view :key="index" class="dropWrapper"
									:class="index<=card.visitorStatusId?'dropWrapperEn':'dropWrapperDis'">
									<view class="text" :class="index<=card.visitorStatusId?'textEn':'textDis'">
										{{item.name}}
									</view>
								</view>

								<view v-if="!item.end"
									:class="index<card.visitorStatusId?'lineWrapperEn':'lineWrapperDis'">
								</view>
							</template>
						</view>
					</view>
					<view class="updateAllPhone">
						<view class="left">
							<template class="aiIntention" v-if="card.aiIntention">
								<view class="aiIntention" v-if="card.aiIntention.includes('高')">大数据推测：<span
										style="color:red">{{card.aiIntention}}</span></view>
								<view class="aiIntention" v-if="card.aiIntention.includes('中')">大数据推测：<span
										style="color:orange">{{card.aiIntention}}</span></view>
								<view class="aiIntention" v-if="card.aiIntention.includes('低')">
									大数据推测：<span>{{card.aiIntention}}</span></view>
							</template>
						</view>

						<view class="right">
							<view class="phoneContainer">
								{{card.phone}}
							</view>
							<view v-if="!card.hasAllPhoneNumber" class="updatePhoneBtnWrapper"
								@click.stop="onShowUpdateAllPhoneNum(card)">
								补全
							</view>
						</view>
					</view>


					<view class="top" style="margin-top: 10rpx;">
						<view class="left">
							<image class="avatar" :src="card.avatar||'/static/img/user_img_ntx.png'" mode=""></image>
							<view class="wrapper">
								<view class="name">
									{{card.name||''}}

									<template v-if="card.sex<2">
										<span style="margin-left: 10rpx"></span>
										{{sexList[card.sex]}}
									</template>

									<span v-if="!(isReferrer||isChannel)&&card.protectDay&&card.protectDay>=0"
										style="margin-left: 10rpx">保护期剩{{card.protectDay}}天</span>
									<span style="margin-left: 10rpx"
										v-if="!(isReferrer||isChannel)&&card.protectDay&&card.protectDay<0">已过保护期{{0-card.protectDay}}天</span>
								</view>
								<view v-if="card.salesmanName&&card.salesmanName.length>0" class="name">
									置业顾问：
									<text class="myText">
										{{card.salesmanName}}
									</text>
									<view v-if="card.allocateSource!=null&&'sys_allocate'==card.allocateSource"
										class="name">
										旧顾问：
										<text class="myText">
											{{card.lastSalesmanName||''}}
										</text>
									</view>
								</view>
								<view class="scanCount">
									<span style="margin-right: 30rpx"
										v-if="!(isReferrer||isChannel)&&card.referrerName">推荐人：{{card.referrerName}}</span>访问{{card.viewTimes}}次
								</view>
								<view class="firstWrapper" v-if="card.firstUserLogText&&card.firstUserLogText.length>0">
									首次访问：{{card.firstUserLogText}}
								</view>
							</view>
						</view>
					</view>
					<view class="middle">
						<view class="left">
							<view>{{intentionList[card.intention]}}</view>

							<view class="followTag" v-if="!(isReferrer||isChannel)">{{card.followTab}}</view>
						</view>
						<view class="right text-2line-ellipsis" v-if="card.lastUserLogText.length">
							最近访问：{{card.lastUserLogText||''}}
						</view>
					</view>
					<template v-if="card.customerStatusLogs&&card.customerStatusLogs.length>0">
						<view class="" style="width: 100%;background-color: #dddddd;height: 1px;margin-top: 10px;">
						</view>
						<view class="channelInfoWrapper" @click.stop="gotoChannelCustomerDetail(card)">
							<view class="left">
								<view class="">
									{{card.customerStatusLogs[0].channel?'报备渠道':'置业顾问'}}：{{card.customerStatusLogs[0].operator||""}}
								</view>
								<view class="">
									最新动态：【{{card.customerStatusLogs[0].statusTitle}}】
								</view>
								<view class="" style="margin-left: 130rpx;">
									{{card.customerStatusLogs[0].createTime}}
								</view>
							</view>
							<image class="right" src="/pages/shop/static/image/btn_more.png" mode=""></image>
						</view>
					</template>

					<view class="bntWrapper">
						<view v-if="!(isReferrer||isChannel)&&card.referrerPhone" class="leftBtn"
							@click.stop="gotoPhone(card.referrerPhone)">
							<image class="icon" src="/pages/shop/static/image/icon_visitor_tel.png" mode=""></image>
							经纪人
						</view>
						<view v-if="(isReferrer||isChannel)&&card.salesmanPhone" class="leftBtn"
							@click.stop="gotoPhone(card.salesmanPhone)">
							<image class="icon" src="/pages/shop/static/image/icon_visitor_tel.png" mode=""></image>
							顾问
						</view>
						<view v-if="card.phone&&card.phone.length>0" class="leftBtn"
							@click.stop="gotoPhone(card.phone)">
							<image class="icon" src="/pages/shop/static/image/icon_visitor_tel.png" mode=""></image>
							客户
						</view>

					</view>

				</view>
			</template>
		</template>
		<view class="" style="height: 100rpx;">
		</view>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';

	let timeId = null
	let that = null
	const api = require("@/static/js/api.js")
	const utils = require("@/static/js/utils.js")
	const Config = require("@/config.js")
	const TAB_sortField = ['lastLoginTime', 'createTime', 'viewTimes', 'protectLimitDay', 'followTime', 'followTime',
		'result'
	];


	export default {
		computed: {
			...mapState({
				hasLogin: state => state.userInfo.hasLogin,
				isAuthPhone: state => state.userInfo.isAuthPhone,
				isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
				isSeller: state => state.userInfo.isSeller,
				isReferrer: state => state.userInfo.isReferrer,
				isChannel: state => state.userInfo.isChannel,
				sellerObj: state => state.userInfo.sellerObj,
				buyerObj: state => state.userInfo.buyerObj,
				shopInfo: state => state.userInfo.shopInfo,
			}),

		},
		data() {
			return {
				title:"",
				protectLeftDay: '',
				allocate: false,
				nextFollow: false,
				isShowAddCustomer: false,
				isShowAllSelect: false,
				isShowUpdateAllPhoneNum: false,
				phoneStart3: "",
				phoneEnd4: "",
				customId: "",

				intentionList: [
					'未知意向',
					'低意向',
					'中意向',
					'高意向',
					'必买',
					'已购买',
					'无意向'
				],
				sexList: ["女", "男", "未知"],

				visitorStatusList: [{
						key: 'NOT_VISITED',
						name: "未到访"
					},
					{
						key: 'VISITED',
						name: "到访"
					},
					{
						key: 'DEPOSIT',
						name: "认筹"
					},
					{
						key: 'ORDERED',
						name: "认购"
					},
					{
						key: 'DONE',
						name: "签约",
						end: true
					},
				],

				searchObj: {
					showAction: false,
					inputAlign: "center",
					value: "",
					height: 80,
				},
				sortObj: {
					sortField: 'lastLoginTime',
					sortOrder: 'desc',
				},

				backupCustomerItem: {},

				selectObj: {
					isSelect: false,
					phoneSelectBackup: false,
					avatarSelectBackup: false,
					visitedSelectBackup: false,
					mineSelectBackup: false,
					intentSelectBackup: -1,
					daySelectBackup: -1,
					timeStartBackup: '',
					timeEndBackup: '',
					phoneSelect: false,
					avatarSelect: false,
					mineSelect: false,
					visitedSelect: false,
					intentSelect: -1,
					daySelect: -1,
					timeStart: 0,
					timeEnd: 0,
					protectDaySelect: -1,
					protectDaySelectBackup: -1,
					followTypeSelect: -1,
					followTypeSelectBackup: -1,
					info: {
						list: ['留电话', '有头像', '我的拓客', '已到访'],
						title: '用户群'
					},
					intent: {
						list: ['已购买', '必买', '高意向', '中意向', '低意向', '无意向', '未知意向'],
						title: '意向等级'
					},
					time: {
						list: ['今日', '近7日', '近30日'],
						title: '访问时间'
					},
					followType: {
						list: ['从未跟进', '今日已跟进', '今日未跟进'],
						title: '客户跟进'
					},
					protectDay: {
						list: ['已过保护期', '未过保护期'],
						title: '保护期'
					},

				},


				dropDownObj: [{
					value: 0,
					label: '最近访问时间倒序',
					options: [{
							label: '最近访问时间倒序',
							value: 0,
						},
						{
							label: '首次访问时间倒序',
							value: 1,
						},

						{
							label: '访问次数优先',
							value: 2,
						},
						{
							label: '保护期从少到多',
							value: 3,
						},
						{
							label: '跟进时间正序',
							value: 4,
						},
						{
							label: '跟进时间倒序',
							value: 5,
						},
						{
							label: '推测意向从高到低',
							value: 6,
						},
					],
				}],
				cardObj: {
					list: [],
					loadStatus: "loading",
					pageIndex: 1,
					curPageIndex: 0,
					total: 0,
				},
				headerContainerCss: {
					paddingTop: "120rpx"
				}
			};
		},

		components: {},
		props: {
			value: {
				type: Boolean,
				default: false,
			},
			onShow: {
				type: Boolean,
				default: true,
			}
		},

		watch: {
			value: {
				handler: function observer(val) {
					var _this = this;
					if (val) {
						// this.setData({
						// 	selfShow: true
						// });
						_this.selfShow = true;
						_this.closeShow = false;
						setTimeout(() => {
							console.log("@@@@@closeshow")
							_this.closeShow = true;
						}, 2000);
					} else {
						// this.setData({
						// 	selfShow: false
						// });
						_this.selfShow = false;
					}
				},
				immediate: true
			},
			onShow: {
				handler: function observer(val) {
					var _this = this;
					if (val) {
						_this.refreshCustomerInfo()
					}
				},
				immediate: true
			},
		},
		onLoad(options) {
			that = this;
			let filterType = options.filterType;		
			this.title = options.filterTitle
			if (filterType) {
				switch (filterType) {
					case "newAllocate":
						that.allocate = true
						break;
					case "protectDayLeftThreeDays":
						that.protectLeftDay = 3
						break;
					case "protectDayLeftOneDays":
						that.protectLeftDay = 0
						break;
					case "notInProtectDay":
						that.protectLeftDay = -1
						break;
					case "ToAddFollowLog":
						that.nextFollow = true
					default:
						break;
				}
			}

		},
		mounted() {
			this.clearListShow(this.cardObj)
			this.getCustomerList()
		},
		created() {
			that = this
		},
		onReachBottom(){
			this.onScrolltolower()
			console.log("onReachBottom")
			
		},
		methods: {
			gotoReportLog() {
				uni.navigateTo({
					url: '/pages/shop/customer/reportLog'
				})
			},
			changeCalendar(e) {
				that.selectObj.daySelect = -1;
				that.selectObj.timeStart = e.startDate
				that.selectObj.timeEnd = e.endDate
				console.log(e);
			},


			onShowSelectAll() {
				that.selectObj.timeStart = that.selectObj.timeStartBackup;
				that.selectObj.timeEnd = that.selectObj.timeEndBackup;
				that.selectObj.avatarSelect = that.selectObj.avatarSelectBackup;
				that.selectObj.phoneSelect = that.selectObj.phoneSelectBackup;
				that.selectObj.intentSelect = that.selectObj.intentSelectBackup;
				that.selectObj.visitedSelect = that.selectObj.visitedSelectBackup;
				that.selectObj.mineSelect = that.selectObj.mineSelectBackup;
				that.selectObj.daySelect = that.selectObj.daySelectBackup;
				that.selectObj.protectDaySelect = that.selectObj.protectDaySelectBackup;
				that.selectObj.followTypeSelect = that.selectObj.followTypeSelectBackup;
				that.isShowAllSelect = true;
			},

			onPhoneSelect() {
				that.selectObj.phoneSelect = !that.selectObj.phoneSelect
			},

			onAvatarSelect() {
				that.selectObj.avatarSelect = !that.selectObj.avatarSelect
			},
			onVisitedSelect() {
				that.selectObj.visitedSelect = !that.selectObj.visitedSelect
			},
			onMineSelect() {
				that.selectObj.mineSelect = !that.selectObj.mineSelect
			},
			onPassProtectDaySelect(index) {
				if (that.selectObj.protectDaySelect == index) {
					that.selectObj.protectDaySelect = -1
				} else {
					that.selectObj.protectDaySelect = index;
				}
			},
			onPassFollowTypeSelect(index) {
				if (that.selectObj.followTypeSelect == index) {
					that.selectObj.followTypeSelect = -1
				} else {
					that.selectObj.followTypeSelect = index;
				}
			},

			onIntentSelect(id) {
				if (that.selectObj.intentSelect == id) {
					that.selectObj.intentSelect = -1
				} else {
					that.selectObj.intentSelect = id
				}
			},

			onTimeSelect(id) {
				that.selectObj.timeStart = '';
				that.selectObj.timeEnd = '';
				if (that.selectObj.daySelect == id) {
					that.selectObj.daySelect = -1
				} else {
					that.selectObj.daySelect = id
				}
			},
			onSelectRest() {
				that.selectObj.isSelect = false;
				that.selectObj.timeStart = '';
				that.selectObj.timeEnd = '';
				that.selectObj.avatarSelect = false;
				that.selectObj.phoneSelect = false;
				that.selectObj.intentSelect = -1;
				that.selectObj.daySelect = -1;
				that.selectObj.protectDaySelect = -1;
				that.selectObj.followTypeSelect = -1;
				that.selectObj.timeStartBackup = that.selectObj.timeStart;
				that.selectObj.timeEndBackup = that.selectObj.timeEnd;
				that.selectObj.avatarSelectBackup = that.selectObj.avatarSelect;
				that.selectObj.phoneSelectBackup = that.selectObj.phoneSelect;
				that.selectObj.intentSelectBackup = that.selectObj.intentSelect;
				that.selectObj.protectDaySelectBackup = that.selectObj.protectDaySelect;
				that.selectObj.followTypeSelectBackup = that.selectObj.followTypeSelect;
				that.selectObj.daySelectBackup = that.selectObj.daySelect;
				that.clearListShow(that.cardObj)
				that.getCustomerList()
			},
			onSelectConfirm() {

				that.selectObj.timeStartBackup = that.selectObj.timeStart;
				that.selectObj.timeEndBackup = that.selectObj.timeEnd;
				that.selectObj.avatarSelectBackup = that.selectObj.avatarSelect;
				that.selectObj.phoneSelectBackup = that.selectObj.phoneSelect;
				that.selectObj.mineSelectBackup = that.selectObj.mineSelect;
				that.selectObj.visitedSelectBackup = that.selectObj.visitedSelect;
				that.selectObj.intentSelectBackup = that.selectObj.intentSelect;
				that.selectObj.protectDaySelectBackup = that.selectObj.protectDaySelect;
				that.selectObj.followTypeSelectBackup = that.selectObj.followTypeSelect;
				that.selectObj.daySelectBackup = that.selectObj.daySelect;

				if ((that.selectObj.timeStartBackup == '') &&
					(that.selectObj.timeEndBackup == '') &&
					(!that.selectObj.avatarSelectBackup) &&
					(!that.selectObj.phoneSelectBackup) &&
					(!that.selectObj.phoneSelectBackup) &&
					(!that.selectObj.mineSelectBackup) &&
					(!that.selectObj.visitedSelectBackup) &&
					(that.selectObj.intentSelectBackup == -1) &&
					(that.selectObj.daySelectBackup == -1)
				) {
					that.selectObj.isSelect = false;
				} else {
					that.selectObj.isSelect = true;
				}

				that.isShowAllSelect = false;
				that.clearListShow(that.cardObj)
				that.getCustomerList()
			},
			onScrolltolower() {
				that.getCustomerList()
			},

			gotoCustomerDetail(card) {
				//||this.isChannel==1
				if (!this.shopInfo.allowEditUser) {
					return;
				}
				if (this.isReferrer == 1) {
					return;
				}
				this.backupCustomerItem = card;
				uni.navigateTo({
					url: '/pages/shop/customer/customerDetail?id=' + card.id
				})
			},

			gotoChannelCustomerDetail(card) {
				this.backupCustomerItem = card;

				uni.navigateTo({
					url: '/pages/shop/customer/channelCustomerDetail?list=' + JSON.stringify(card
						.customerStatusLogs)
				})
			},


			refreshCustomerInfo() {
				let that = this
				if (that.backupCustomerItem && that.backupCustomerItem.id) {
					api.getCustomerDetail({
						interfaceName: that.backupCustomerItem.id,
						param: {}
					}).then(res => {
						console.log(res)
						if (res.success) {
							that.backupCustomerItem.status = res.data.status || 0
							that.backupCustomerItem.intention = res.data.intention || 0
							that.backupCustomerItem.name = res.data.name || ''
							that.backupCustomerItem.visitorStatus = res.data.visitorStatus || ""
							that.backupCustomerItem.visitorStatusId = 0;
							that.backupCustomerItem.followTab = res.data.followTab || '从未跟进';
							var status = that.backupCustomerItem.visitorStatus && JSON.parse(that
								.backupCustomerItem.visitorStatus) || ['']
							for (let j = 0; j < that.visitorStatusList.length; j++) {
								if (that.visitorStatusList[j].key == status[0]) {
									that.backupCustomerItem.visitorStatusId = j;
								}
							}
							that.backupCustomerItem.customerStatusLogs = res.data.customerStatusLogs
						}
					})
				}
			},

			gotoPhone(phone) {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: phone,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			onSearch(e) {
				console.log("onTitleSearch:", );
				that.clearListShow(that.cardObj)
				that.getCustomerList();
			},


			getCustomerList() {

				let that = this
				if (that.cardObj.curPageIndex != that.cardObj.pageIndex) {
					that.cardObj.curPageIndex = that.cardObj.pageIndex
					var NONE = ''

					var period = NONE
					if (that.selectObj.daySelectBackup >= 0) {
						var tab = [0, -7, -30]
						period = tab[that.selectObj.daySelectBackup]
					}

					var intention = NONE
					if (that.selectObj.intentSelectBackup >= 0) {
						var tab = [5, 4, 3, 2, 1, 6, 0]
						intention = tab[that.selectObj.intentSelectBackup]
					}
					api.getCustomerList({
						param: {
							nextFollow: that.nextFollow ? true : NONE,
							allocate: that.allocate ? true : NONE,
							protectLeftDay: that.protectLeftDay !== '' ? that.protectLeftDay : NONE,
							// salesmanId: "1470953159345164290",  //1470953159345164290  1470953159345164290
							limit: 10,
							page: that.cardObj.pageIndex,
							params: that.searchObj.value,
							sortBy: that.sortObj.sortField,
							hasAvatar: that.selectObj.avatarSelectBackup ? true : NONE,
							hasPhone: that.selectObj.phoneSelectBackup ? true : NONE,
							visited: that.selectObj.visitedSelectBackup ? true : NONE,
							mine: that.selectObj.mineSelectBackup ? true : NONE,
							intention: intention,
							period: period,
							protectDay: that.selectObj.protectDaySelectBackup == -1 ? NONE : that.selectObj
								.protectDaySelectBackup,
							followType: that.selectObj.followTypeSelectBackup == -1 ? NONE : that.selectObj
								.followTypeSelectBackup,
							beginLastLoginTime: that.selectObj.timeStartBackup.length > 0 ? that.selectObj
								.timeStartBackup : NONE,
							endLastLoginTime: that.selectObj.timeEndBackup.length > 0 ? that.selectObj
								.timeEndBackup : NONE,
							orderBy: that.sortObj.sortOrder || 'desc',
						}

					}).then(res => {
						console.log(res)
						if (res.code == 0) {

							that.pushListShow(that.cardObj, res.data)
							that.cardObj.total = res.count;
						}
					})
				}
			},
			/**
			 * @description: 列表中添加数据
			 * @param {number} id   u-tabs-swiper的当前ID
			 * @param {list}  列表
			 * @return void
			 */
			pushListShow(srcObj, pushlist) {
				if (pushlist && pushlist.length > 0) {
					for (let i = 0; i < pushlist.length; i++) {
						pushlist[i].intention = pushlist[i].intention || 0
						pushlist[i].allTimes = pushlist[i].allTimes || ''
						pushlist[i].date = pushlist[i].date || ''
						pushlist[i].avatar = pushlist[i].avatar || ''
						pushlist[i].nickname = pushlist[i].nickname || ''
						pushlist[i].sex = pushlist[i].sex || 2
						pushlist[i].aiIntention = pushlist[i].aiIntention || ''
						pushlist[i].visitorStatusId = 0;
						for (let j = 0; j < this.visitorStatusList.length; j++) {
							var status = pushlist[i].visitorStatus && JSON.parse(pushlist[i].visitorStatus) || ['']
							console.log("visitorStatusList:", status[0])
							if (this.visitorStatusList[j].key == status[0]) {
								pushlist[i].visitorStatusId = j;
							}
						}

						if (pushlist[i].lastUserLog && pushlist[i].lastUserLog.createTime) {
							pushlist[i].lastUserLogText = pushlist[i].lastUserLog.createTime + ' ' + (pushlist[i]
								.lastUserLog.content || '');
						} else {
							pushlist[i].lastUserLogText = ""
						}

						if (pushlist[i].firstUserLog && pushlist[i].firstUserLog.createTime) {
							pushlist[i].firstUserLogText = pushlist[i].firstUserLog.createTime + ' ' + (pushlist[i]
								.firstUserLog.content || '');
						} else {
							pushlist[i].firstUserLogText = ""
						}

						if (pushlist[i].phone &&
							pushlist[i].phone.length == 11 &&
							/^\d+$/.test(pushlist[i].phone.slice(0, 3)) &&
							/^\d+$/.test(pushlist[i].phone.slice(7, 11)) &&
							pushlist[i].phone.slice(3, 7) == "****"
						) {
							pushlist[i].hasAllPhoneNumber = false
						} else {
							pushlist[i].hasAllPhoneNumber = true
						}

						srcObj.list.push(pushlist[i])
					}
					srcObj.pageIndex++;

					if (pushlist.length == 10) {
						srcObj.loadStatus = "loadmore"
					} else {
						srcObj.loadStatus = "nomore"
					}
					console.log("srcObj:", srcObj)
				} else {
					srcObj.loadStatus = "nomore"
				}
			},

			//----清空列表
			clearListShow(srcObj) {
				srcObj.curPageIndex = 0;
				srcObj.total = 0;
				srcObj.pageIndex = 1;
				srcObj.list.splice(0, srcObj.list.length)
			},


			gotoLottery(id) {
				uni.navigateTo({
					url: "/pages/client/lottery/index?id=" + id
				})
			},

			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
			},

			onSuccessAddCustomer() {
				that.dropDownObj[0].value = 1
				that.changeSortField(1)
			},

			changeSortField(index) {
				// 更多的细节，如有需要请自行根据业务逻辑进行处理
				console.log("change:", index)
				this.sortObj.sortField = TAB_sortField[index];
				if (index === 3 || index === 4) {
					this.sortObj.sortOrder = 'asc'
				}
				this.dropDownObj[0].label = this.dropDownObj[0].options[index].label
				that.clearListShow(that.cardObj)
				that.getCustomerList();
				// this.$refs.uDropdown.highlight(xxx);
			},
			changeSortOrder(index) {
				// 更多的细节，如有需要请自行根据业务逻辑进行处理
				// console.log("change:", index)
				this.sortObj.sortOrder = ((index === 1 || index === 3 || index === 4) ? 'asc' : 'desc')
				this.dropDownObj[1].label = this.dropDownObj[1].options[index].label
				that.clearListShow(that.cardObj)
				that.getCustomerList();
				// this.$refs.uDropdown.highlight(xxx);
			},

			onPopupAddCustomer() {
				let that = this
				console.log("onPopupAddCustomer")
				that.isShowAddCustomer = true;
			},

			updateChannelReportTime(card) {
				let that = this
				api.updateChannelReportTime({
					param: {
						id: card.id
					}
				}).then(res => {
					console.log(res)
					if (res.success) {
						//刷新显示
						that.backupCustomerItem = card
						that.refreshCustomerInfo();
					}
				})
			},

			onShowUpdateAllPhoneNum(card) {
				console.log("onShowUpdateAllPhoneNum")
				if (card.phone && card.phone.length == 11) {
					if (/^\d+$/.test(card.phone.slice(0, 3)) &&
						/^\d+$/.test(card.phone.slice(7, 11)) &&
						card.phone.slice(3, 7) == "****"
					) {

						this.phoneStart3 = card.phone.slice(0, 3)
						this.phoneEnd4 = card.phone.slice(7, 11)
						this.customId = card.id

						this.isShowUpdateAllPhoneNum = true
						return;
					}
				}

			}

		},
	}
</script>
<style>
	page{
		background-color: #f6f6f6;
	}
</style>
<style lang="scss">
	.container {
		width: 100vw;
	}
	.headerNone{
		width: 750rpx;
		height: 120rpx;
		box-sizing: content-box;
	}
	.headerContainer {
		width: 750rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-bottom: #F3F3F3 solid 1px;
		position: sticky;
		position: -webkit-sticky;
		box-sizing: content-box;
		// padding-top: calc(44px + 14px + env(safe-area-inset-top));
		top: 0; 
		left: 0;
		z-index: 2;
		.searchItem {
			// margin-top: 30rpx;
			width: 680rpx;
			margin-bottom: 30rpx;
			margin-right: 0rpx;
		}
	}
	
	.aiIntention {
		margin-bottom: 10rpx;
		font-size: 24rpx;
	}
	
	.followTag {
		margin-top: 5px;
		bottom: 0;
		left: 0;
		width: 108rpx;
		height: 44rpx;
		background-color: darkgray;
		border-radius: 10rpx;
		font-size: 21rpx;
		color: #FFFFFF;
		line-height: 44rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	
		.icon {
			width: 18rpx;
			height: 18rpx;
			// margin-left: 5rpx;
		}
	}


	.namecardContainer {
		width: 714rpx;
		// height: 372rpx;
		background: #FFFFFF;
		box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 30rpx;
		margin-left: 18rpx;
		position: relative;

		.tagWrapper {
			position: absolute;
			right: 0;
			top: 0;
			color: #ffffff;
			background-color: #ff0000;
			height: 40rpx;
			padding: 0 10rpx;
			line-height: 40rpx;
			border-radius: 0 20rpx 0 20rpx;
		}

		.stepContainer {
			height: 100rpx;

			.stepWrapper {
				width: 550rpx;
				margin-left: 50rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 50rpx;

				.dropWrapperEn {
					border: solid 3rpx #eb6100;
				}

				.dropWrapperDis {
					border: solid 3rpx #7d7d7d;
				}

				.dropWrapper {
					width: 23rpx;
					height: 23rpx;
					background-color: #ffffff;
					position: relative;
					border-radius: 50%;

					.text {
						position: absolute;
						top: 40rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 80rpx;
						font-size: 20rpx;

						text-align: center;
					}

					.textEn {
						color: #eb6100;
					}

					.textDis {
						color: #7d7d7d;
					}
				}

				.lineWrapperEn {
					width: 120rpx;
					height: 3rpx;
					background-color: #eb6100;
				}

				.lineWrapperDis {
					width: 120rpx;
					height: 3rpx;
					background-color: #7d7d7d;
				}
			}
		}

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.avatar {
					width: 98rpx;
					height: 98rpx;
					margin-right: 30rpx;
					border-radius: 50%;
				}

				.wrapper {
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;

					.name {
						margin-bottom: 15rpx;

						.myText {
							font-size: 24rpx;
							color: #999999;
						}
					}

					.scanCount {
						margin-bottom: 15rpx;
					}

					.firstWrapper {
						margin-left: 15rpx;
						width: 466rpx;
						// height: 80rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
						line-height: 40rpx;
						margin-bottom: 15rpx;
					}
				}
			}

			.right {
				font-size: 32rpx;
				font-weight: 600;
				color: #5E9FFD;
			}

		}

		.middle {
			width: 100%;
			margin-top: 5rpx;
			display: flex;
			align-items: center;

			.left {
				width: 110rpx;
				// height: 40rpx;
				background: #F4F4F4;
				border-radius: 8rpx;
				text-align: center;
				font-size: 24rpx;
				color: #666666;
				line-height: 40rpx;
				margin-right: 30rpx;
			}

			.right {
				width: 466rpx;
				// height: 80rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
			}
		}

		.channelInfoWrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 0;
			font-size: 24rpx;
			.left {
				width: 500rpx;
			}

			.right {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.bottom {
			display: flex;
			justify-content: flex-end;
			width: 100%;
			// margin-left: 250rpx;
			margin-top: 56rpx;

			.item {
				width: 188rpx;
				height: 66rpx;
				background: rgba(94, 159, 253, 0.06);
				border-radius: 33rpx;
				// opacity: 0.06;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #666666;
				margin-left: 22rpx;

				.icon {
					width: 54rpx;
					height: 54rpx;
					margin-right: 22rpx;
				}
			}
		}

		.bntWrapper {
			display: flex;
			margin-top: 30rpx;
			width: 100%;
			justify-content: flex-end;

			.leftBtn {
				width: 188rpx;
				height: 66rpx;
				background-color: #ffffff;
				border-radius: 33rpx;
				border: solid 2rpx #16a5fe;
				font-size: 32rpx;
				color: #16a5fe;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 22rpx;

				.icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}

			.rightBtn {
				width: 188rpx;
				height: 66rpx;
				background-color: #16a5fe;
				border-radius: 33rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 22rpx;

				.icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
	}


	.updateAllPhone {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.left {}

		.right {
			display: flex;
			align-items: center;

			.phoneContainer {}

			.updatePhoneBtnWrapper {
				background-color: #ff7927;
				color: #ffffff;
				font-size: 25rpx;
				height: 50rpx;
				line-height: 50rpx;
				padding: 0 15rpx;
				margin-left: 10rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>